import React, { Component } from 'react';  
import ResizableRect, { ResizableRectProps } from 'react-resizable-rotatable-draggable-radiusable'; // 确保这个库有TypeScript支持  
  
interface AppState {  
  width: number;  
  height: number;  
  top: number;  
  left: number;  
  rotateAngle: number;  
  borderRadius: {  
    rtl: number;  
    rtr: number;  
    rbr: number;  
    rbl: number;  
  };  
}  
  
interface ResizableRectStyle {  
  top: number;  
  left: number;  
  width: number;  
  height: number;  
  // 注意：这里我假设没有直接的'radius'属性，因为通常这样的库会分开处理每个角的半径  
  // 如果库确实提供了这样的属性，请相应地修改它  
  // radius?: { rtl: number, rtr: number, rbr: number, rbl: number };  
}  
  
class App extends Component<{}, AppState> {  
  constructor(props: {}) {  
    super(props);  
    this.state = {  
      width: 100,  
      height: 100,  
      top: 100,  
      left: 100,  
      rotateAngle: 0,  
      borderRadius: {  
        rtl: 0,  
        rtr: 0,  
        rbr: 0,  
        rbl: 0,  
      },  
    };  
  }  
  
  handleResize = (style: ResizableRectStyle, isShiftKey: boolean, type: string) => {  
    // 注意：这里假设style对象没有直接的'radius'属性  
    // 如果库提供了，您需要相应地处理它  
    this.setState({  
      top: Math.round(style.top),  
      left: Math.round(style.left),  
      width: Math.round(style.width),  
      height: Math.round(style.height),  
      // borderRadius: { ... }, // 如果需要更新borderRadius，您需要有逻辑来处理它  
    });  
  }  
  
  handleRotate = (rotateAngle: number) => {  
    this.setState({  
      rotateAngle,  
    });  
  }  
  
  handleDrag = (deltaX: number, deltaY: number) => {  
    this.setState({  
      left: this.state.left + deltaX,  
      top: this.state.top + deltaY,  
    });  
  }  
  
  render() {  
    const { width, height, top, left, rotateAngle, borderRadius } = this.state;  
    return (  
      <div className="App">  
        <ResizableRect  
          left={left}  
          top={top}  
          width={width}  
          height={height}  
          rotateAngle={rotateAngle}  
          // 注意：如果ResizableRect支持borderRadius，请确保正确传递它  
          // borderRadius={borderRadius} // 如果库支持的话  
          zoomable="n, w, s, e, nw, ne, se, sw, rne, rnw, rse, rsw"  
          defaultProportionalZoomable="nw, ne, se, sw, rne, rnw, rse, rsw"  
          onResize={this.handleResize}  
          onDrag={this.handleDrag}  
          onRotate={this.handleRotate}  
        />  
      </div>  
    );  
  }  
}  
  
export default App;